<template>
  <div>
    <div class="general-info">
      <div class="info-top">
        <div class="info-avatar">
          <img src="@/assets/logo.png" alt=" " />
        </div>
        <div class="info-info">
          <div class="name-info">
            <div class="person-name">qq_42792430</div>
            <div class="code-age"><span>码龄4年</span></div>
          </div>
          <div class="vip-info no-vip">
            <div class="no-vip-info">
              开通会员全站VIP资源免费下，更有千元大奖等你拿
            </div>
            <a href="" class="go-mall"
              >开通会员<i class="el-icon-arrow-right"></i
            ></a>
          </div>
        </div>
      </div>
      <div class="info-bottom">
        <div class="coin">
          <i></i>
          <span class="coin-info">我的余额</span>
          <span class="coin-num">0</span>
          <a href="">去充值</a>
        </div>
        <i class="split"></i>
        <div class="grey-btn">
          <a href="/personal">个人主页<i class="el-icon-arrow-right"></i></a>
        </div>
      </div>
    </div>
    <!-- 基本信息 -->
    <div class="base-info">
      <div class="base-info-head">
        <span>基本信息</span>
        <a @click="baseInfoFlag = !baseInfoFlag">
          <i class="el-icon-edit-outline"> </i>编辑
        </a>
      </div>
      <div class="base-info-content">
        <el-form ref="baseInfo" :model="baseInfoModel" label-width="80px">
          <el-form-item label="用户昵称">
            <span v-if="!baseInfoFlag">
              {{ baseInfoModel.nickName }}
            </span>
            <el-input
              v-model="baseInfoModel.nickName"
              placeholder="用户昵称"
              v-if="baseInfoFlag"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户ID">
            <span>{{ baseInfoModel.userID }}</span>
          </el-form-item>
          <el-form-item label="性别">
            <span v-if="!baseInfoFlag">未选择</span>
            <el-radio v-if="baseInfoFlag" v-model="radio" label="1">
              男
            </el-radio>
            <el-radio v-if="baseInfoFlag" v-model="radio" label="2">
              女
            </el-radio>
          </el-form-item>
          <el-form-item label="个人简介">
            <span v-if="!baseInfoFlag">未填写</span>
            <el-input
              placeholder="用户昵称"
              v-if="baseInfoFlag"
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item label="所在地">
            <span v-if="!baseInfoFlag">未选择</span>
            <el-col :span="8" v-if="baseInfoFlag">
              <el-input></el-input>
            </el-col>
            <el-col :span="8" v-if="baseInfoFlag">
              <el-input></el-input>
            </el-col>
            <el-col :span="8" v-if="baseInfoFlag">
              <el-input></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="地址管理">
            <Address></Address>
          </el-form-item>
          <el-form-item label="出生日期">
            <span v-if="!baseInfoFlag">未设置</span>
            <el-date-picker
              v-if="baseInfoFlag"
              v-model="value1"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="开始工作">
            <span v-if="!baseInfoFlag">未填写</span>
            <el-date-picker
              v-if="baseInfoFlag"
              v-model="value1"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button v-if="baseInfoFlag">确认</el-button>
            <el-button type="primary" v-if="baseInfoFlag">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 教育信息 -->
    <div class="education-info">
      <div class="education-info-head">
        <span>教育信息</span>
        <a @click="baseInfoFlag = !baseInfoFlag">
          <i class="el-icon-edit-outline"> </i>编辑
        </a>
      </div>
      <div class="education-info-content">
        <el-form ref="baseInfo" :model="baseInfoModel" label-width="80px">
          <el-form-item label="学校名称">
            <span> </span>
          </el-form-item>
          <el-form-item label="专业">
            <span> </span>
          </el-form-item>
          <el-form-item label="入学时间">
            <span> </span>
          </el-form-item>
          <el-form-item label="学历">
            <span> </span>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 工作信息 -->
    <div class="work-info">
      <div class="work-info-head">
        <span>工作信息</span>
        <a @click="baseInfoFlag = !baseInfoFlag">
          <i class="el-icon-edit-outline"> </i>编辑
        </a>
      </div>
      <div class="work-info-content">
        <el-form ref="baseInfo" :model="baseInfoModel" label-width="80px">
          <el-form-item label="公司名称">
            <span> </span>
          </el-form-item>
          <el-form-item label="职位名称">
            <span> </span>
          </el-form-item>
          <el-form-item label="所属行业">
            <span> </span>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import Address from './address.vue'

export default {
  components: {
    Address
  },
  data() {
    return {
      baseInfoModel: {
        nickName: 'qq_42792430',
        userID: 'qq_42792430'
      },
      baseInfoFlag: false
    }
  }
}
</script>

<style lang="less" scoped>
.general-info {
  margin-bottom: 16px;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #f0f0f2;
  .info-top {
    padding: 24px 0 40px 24px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.04);
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.04);
    .info-avatar {
      -ms-flex-negative: 0;
      flex-shrink: 0;
      position: relative;
      width: 96px;
      height: 96px;
      margin-right: 16px;
      -webkit-box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.06);
      box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.06);
      border: 2px solid #fff;
      border-radius: 50%;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 50%;
      }
    }
    .info-info {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      .name-info {
        margin-bottom: 16px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        .person-name {
          color: #222226;
          font-weight: 500;
          line-height: 24px;
          font-size: 20px;
          margin-right: 16px;
        }
        .code-age {
          background-color: rgb(199, 233, 253);
          color: rgb(30, 104, 216);
          height: 16px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          border-radius: 8px;
          span {
            padding: 0 6px 0 4px;
            font-size: 12px;
            display: block;
            height: 16px;
            line-height: 16px;
            text-align: center;
          }
        }
      }
      .vip-info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 32px;
        background: -webkit-gradient(
          linear,
          left top,
          right top,
          from(#ffe3b2),
          to(#fff3de)
        );
        background: linear-gradient(90deg, #ffe3b2, #fff3de);
        border-radius: 4px;
        padding: 0 8px;
        font-size: 14px;
        .no-vip-info {
          color: #999aaa;
          margin-right: 88px;
        }
        .go-mall {
          color: #fc5531;
        }
      }
      .vip-info.no-vip {
        background: -webkit-gradient(
          linear,
          left top,
          right top,
          from(#efefef),
          to(#f9f9f9)
        );
        background: linear-gradient(90deg, #efefef, #f9f9f9);
      }
    }
  }
  .info-bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 48px;
    background: #fdfdfd;
    padding-left: 25px;
    font-size: 14px;
    .coin {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      i {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-size: cover;
        margin-right: 5px;
      }
      .coin-info {
        color: #fc5531;
        margin-right: 8px;
      }
      .coin-num {
        color: #222226;
        font-weight: 500;
        margin-right: 85px;
      }
      a {
        color: #fff;
        background: #fc5531;
        display: inline-block;
        width: 72px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        border-radius: 15px;
        font-size: 14px;
      }
    }
    .split {
      width: 1px;
      height: 16px;
      background: #ccccd8;
      margin: 0 32px;
    }
    .grey-btn {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      background: #f2f2f2;
      color: #555666;
      height: 28px;
      border-radius: 16px;
      padding: 0 12px;
      cursor: pointer;
    }
  }
}

.base-info {
  margin-bottom: 16px;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #f0f0f2;
  .base-info-head {
    display: flex;
    height: 48px;
    line-height: 48px;
    font-size: 18px;
    font-weight: 600;
    color: #2e2e2e;
    padding-left: 16px;
    padding-right: 16px;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f2;
    a {
      font-size: 14px;
      font-weight: 400;
      cursor: pointer;
      color: #277ccc;
    }
  }
  .base-info-content {
    padding: 16px;
  }
}
.education-info {
  margin-bottom: 16px;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #f0f0f2;
  .education-info-head {
    display: flex;
    height: 48px;
    line-height: 48px;
    font-size: 18px;
    font-weight: 600;
    color: #2e2e2e;
    padding-left: 16px;
    padding-right: 16px;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f2;
    a {
      font-size: 14px;
      font-weight: 400;
      cursor: pointer;
      color: #277ccc;
    }
  }
  .education-info-content {
    padding: 16px;
  }
}
.work-info {
  margin-bottom: 16px;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #f0f0f2;
  .work-info-head {
    display: flex;
    height: 48px;
    line-height: 48px;
    font-size: 18px;
    font-weight: 600;
    color: #2e2e2e;
    padding-left: 16px;
    padding-right: 16px;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f2;
    a {
      font-size: 14px;
      font-weight: 400;
      cursor: pointer;
      color: #277ccc;
    }
  }
  .work-info-content {
    padding: 16px;
  }
}
</style>
